<template>
  <!-- 弹框封装 -->
  <el-dialog 
  v-model="centerDialogVisible" 
  :title="title" 
  :width="width"
   align-center
   >
    <slot name="cont"></slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="xiao()">取消</el-button>
        <el-button type="primary" @click="confirm()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
//title   弹框标题
//centerDialogVisible  弹框显示隐藏
//open  打开弹框
//close  关闭弹框
// let centerDialogVisible = ref(false);
let props = defineProps({
  title: {
    type: String,
    default: 'title'
  },
  confirm:{  //确定按钮的回调
    type:Function,
    default:()=>{
      
    }
  },
 
  width: {
    type: String,
    default: "500"
  },
  xiao: {  //取消按钮的回调
    type: Function,
    default: () => {
    }
  }
})

let centerDialogVisible = ref(false)
let open = () => {
  centerDialogVisible.value = true
}
let close = () => {
  centerDialogVisible.value = false
}
defineExpose({
  open,
  close
})



</script>

<style lang="scss" scoped></style>